<template>
  <div class="dashboard-container">
    <!-- <div class="dashboard-text">name: {{ username }}</div> -->
    <div class="count">
      <!-- 访问量开始 -->
      <div class="customer">
        <div class="title">访问量</div>
        <div class="content">
          <div class="content_1">
            <span>25,848</span> 
            <div class="msg">日同比 12.5% 周同比 5% </div> 
            <div class="line"></div>
          </div>
          <div class="flex">
            <div class="flex_item1">总访问量</div>
            <div class="flex_item2">280万</div>
          </div>
        </div>
      </div>
      <!-- 访问量结束 -->

      <!-- 销售额开始 -->
      <div class="customer">
        <div class="title">销售额</div>
        <div class="content">
          <div class="content_1">
            <span>¥12,000</span>
            <div class="msg">
              <div role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" class="el-progress el-progress--line" style="margin-top: 8px;">
                <div class="el-progress-bar">
                  <div class="el-progress-bar__outer" style="height: 12px;">
                    <div class="el-progress-bar__inner" style="width: 70%;"></div>
                  </div>
                </div>
                <div class="el-progress__text" style="font-size: 16.8px;">70%</div>
              </div>
            </div>
            <div class="line"></div>
          </div>
          <div class="flex">
            <div class="flex_item1">总访问量</div>
            <div class="flex_item2">280万</div>
          </div>
        </div>
      </div>
      <!-- 销售额结束 -->

      <!-- 订单量开始 -->
      <div class="customer">
        <div class="title">订单量</div>
        <div class="content">
          <div class="content_1">
            <span>25,848</span>
            <div class="line"></div>
          </div>
          <div class="flex">
            <div class="flex_item1">转化率</div>
            <div class="flex_item2">60%</div>
          </div>
        </div>
      </div>
      <!-- 订单量结束 -->

      <!-- 用户开始 -->
      <div class="customer">
        <div class="title">用户</div>
        <div class="content">
          <div class="content_1">
            <span>128位</span> 
            <div class="msg">日同比 12.5% 周同比 5% </div> 
            <div class="line"></div>
          </div>
          <div class="flex">
            <div class="flex_item1">总用户</div>
            <div class="flex_item2">10800人</div>
          </div>
        </div>
      </div>
    </div>
      <!-- 用户结束 -->
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  name: 'Dashboard',
  computed: {
    ...mapGetters([
      'username'
    ])
  }
}
</script>

<style lang="scss" scoped>
.dashboard-container {
    height:1043px;
    background-color: #f5f7f9;
    padding: 1em;
    margin: 0 auto;
    .count {
      height:200px;
      // background-color: pink;
      margin: -.5em;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      .customer {
        width:309px;
        background-color:#fff;
        border-radius: 4px;
      }
      .title {
        padding: 14px 16px;
        height: 51px;
        border-bottom: 1px solid #e8eaec;
      }
      .content {
        padding: 12px;
        height: 149px;
        // background-color:aqua;
        .content_1{
          height:85px;
        }
        .content_1 span{
          font-size: 30px;
          color: #515a6e;
        }
        .content_1 .msg {
          height: 42px;
          padding-top: 8px;
          font-size: 14px;
          color: #515a6e;
          line-height: 30px;
        }
        .content_1 .line{
          margin: 8px 0;
          height: 1px;
          background-color: #e8eaec;
        }
        .flex {
          height: 30px;
          color: #515a6e;
          font-size: 14px;
          display: flex;
          justify-content: space-between;
          align-items: flex-end;
        }
      }
    }
}
</style>
